<template>
  <div>
    <div class="none" v-if="shopCarList.length === 0">
      <i></i>
      <p>您的购物车空空如也</p>
      <van-button type="warning" to="/goods/list">购买商品</van-button>
    </div>
    <div class="shopcar" v-for="(item, index) in shopCarList" :key="index" v-else>
      <van-card
      :num="item.cou"
      :price="item.sell_price"
      desc="描述信息"
      :title="item.title"
      :thumb="item.thumb_path"
    >
        <template #footer>
           <van-stepper disable-input v-model="item.cou" integer min="1" @change="changenum(item.id, $event)"/>
        </template>
      </van-card>
      <van-submit-bar
        :price="price"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      info: [],
      shopCarList: [],
      price: 0
    }
  },
  created() {
    this.info = JSON.parse(window.localStorage.getItem('buyId'))
    this.getShopCarList()
  },
  methods: {
    ...mapMutations(['carBuyNum']),
    async getShopCarList () {
      if (this.info) {
        var arr = []
        this.info.forEach(val => {
          arr.push(val.id)
        })
        const { data: res } = await this.$axios.get(`/api/goods/getshopcarlist/${arr.join(',')}`)
        // console.log(res)
        if (res.status !== 0) return this.$notify('获取商品失败')
        // console.log(res.meaasge)
        res.message.forEach(val => {
          this.info.forEach(v => {
            if (v.id - 0 === val.id) {
              val.cou = v.num
              this.price = val.cou * val.sell_price * 100
            }
          }) 
        })
        this.shopCarList = res.message
        this.jisuan()
      }
    },
    changenum (id, event) {
      this.info.forEach(val => {
        if (val.id - 0 === id) {
          const a = id + ''
          // var num = event - val.num
          this.carBuyNum({
            id: a,
            num: event
          })
        }
      })
      this.jisuan()
    },
    onSubmit () {
      this.$notify('想买？？ 不可能')
    },
    // 计算价格
    jisuan () {
      this.price = 0
      this.shopCarList.forEach(val => {
        this.price += val.cou * val.sell_price * 100
        // console.log(a)
      })
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.none{
  text-align: center;
}
i{
  display: block;
  margin: 120px auto 0;
  width: 100px;
  height: 100px;
  background: url('http://destiny001.gitee.io/image/cart_empty.png');
  background-size:contain;
}
.van-submit-bar{
  margin-bottom: 50px;
}
</style>
